<template>
    <div class="commentDetail">
        <van-sticky>
            <div class="commentDetailTop">
                <div class="topLeft">
                    <van-icon name="arrow-left" size="0.5rem" @click="onClickLeft" />
                    <span>评论({{ total }})</span>
                </div>
                <div class="topRight">
                    <van-icon name="share-o" size="0.5rem" />
                </div>
            </div>
        </van-sticky>
        <div class="commentDetailIntro">
            <img :src="store.state.musicListDetail.coverImgUrl" alt="" class="coverimg">
            <div class="intro">
                <div class="title">{{ store.state.musicListDetail.name }}</div>
                <div class="nickname">by {{ store.state.musicListDetail.creator.nickname }}</div>
            </div>
        </div>
        <div class="commentDetailContent">
            <div class="contentTop">
                <span class="title">评论区</span>
                <span class="topRight">
                    <span class="rec" :class="[activeTab === 0 ? 'activeTab' : '']" @click="activeTab = 0">最热</span>
                    <span :style="{ margin: '0 0.1rem' }">|</span>
                    <span class="hot" :class="[activeTab === 1 ? 'activeTab' : '']" @click="activeTab = 1">最新</span>
                </span>
            </div>
            <div class="recContent" v-if="activeTab === 0">
                <div v-for="item in hotComments" class="contentItem">
                    <img :src="item.user.avatarUrl" alt="" class="avaimg">
                    <div class="itemCenter">
                        <div class="centerTop">
                            <div class="topLeft">
                                <div class="name">{{ item.user.nickname }}</div>
                                <div class="time">{{ item.timeStr }}</div>
                            </div>
                            <div :style="{ color: '#999' }">
                                <span :style="{ fontSize: '0.2rem' }">{{ changeCount(item.likedCount) }}</span>
                                <van-icon name="good-job-o" />
                            </div>
                        </div>
                        <div>{{ item.content }}</div>
                    </div>
                </div>
            </div>
            <div class="hotContent" v-else>
                <div v-for="item in comments" class="contentItem">
                    <img :src="item.user.avatarUrl" alt="" class="avaimg">
                    <div class="itemCenter">
                        <div class="centerTop">
                            <div class="topLeft">
                                <div class="name">{{ item.user.nickname }}</div>
                                <div class="time">{{ item.timeStr }}</div>
                            </div>
                            <div :style="{ color: '#999' }">
                                <span :style="{ fontSize: '0.2rem' }">{{ changeCount(item.likedCount) }}</span>
                                <van-icon name="good-job-o" />
                            </div>
                        </div>
                        <div>{{ item.content }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, ref } from 'vue'
import store from '@/store';
import { getListComment } from '@/request/api/musicListDetail';
import { useRoute } from 'vue-router';
let comments = ref([])
let hotComments = ref([])
let total = ref()
let activeTab = ref(0)
onMounted(async () => {
    let id = useRoute().query.id;
    let res = await getListComment(id)
    if (res.data.code === 200) {
        total.value = res.data.total
        comments.value = res.data.comments
        hotComments.value = res.data.hotComments
    }
})
const onClickLeft = () => {
    history.back()
}
const changeCount = (num: number) => {
    if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
    } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
    } else {
        return num
    }
}
</script>
 
<style lang = "less" scoped>
.commentDetail {
    background-color: #f5f5f5;

    .commentDetailTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.2rem;
        background-color: #fff;

        .topLeft {
            display: flex;
            align-items: center;
        }
    }

    .commentDetailIntro {
        display: flex;
        padding: 0.2rem;
        background-color: #fff;

        .coverimg {
            width: 1.6rem;
            height: 1.6rem;
            border-radius: 0.2rem;
        }

        .intro {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            margin-left: 0.2rem;

            .title {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .nickname {
                color: #999;
                font-size: 0.25rem;
            }
        }
    }

    .commentDetailContent {
        margin-top: 0.2rem;
        padding: 0.2rem;
        background-color: #fff;

        .contentTop {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                font-weight: 600;
            }

            .topRight {
                display: flex;
                align-items: center;
            }

            .activeTab {
                font-weight: 700;
            }

        }

        .recContent {
            margin-top: 0.4rem;

            .contentItem {
                display: flex;
                min-height: 1.4rem;
                margin: 0.1rem 0.1rem 0.4rem 0.1rem;

                .avaimg {
                    height: 1rem;
                    width: 1rem;
                    border-radius: 50%;
                }

                .itemCenter {
                    width: 90%;
                    margin-left: 0.1rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    .centerTop {
                        margin-bottom: 0.2rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .topLeft {
                            .name {
                                font-weight: 600;
                            }

                            .time {
                                font-size: 0.2rem;
                                color: #999;
                            }
                        }

                    }

                }
            }

        }

        .hotContent {
            margin-top: 0.4rem;

            .contentItem {
                display: flex;
                min-height: 1.4rem;
                margin: 0.1rem 0.1rem 0.4rem 0.1rem;

                .avaimg {
                    height: 1rem;
                    width: 1rem;
                    border-radius: 50%;
                }

                .itemCenter {
                    width: 90%;
                    margin-left: 0.1rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    .centerTop {
                        margin-bottom: 0.2rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .topLeft {
                            .name {
                                font-weight: 600;
                            }

                            .time {
                                font-size: 0.2rem;
                                color: #999;
                            }
                        }

                    }

                }
            }

        }
    }
}
</style>